<template>
  <div class="message-list">
    <!-- 头部操作栏 -->
    <div class="flex items-center justify-between p-4 border-b border-gray-700">
      <div class="flex items-center gap-4">
        <h2 class="text-lg font-bold text-text-primary">消息</h2>
        <div class="flex items-center gap-2">
          <UiButton
            :variant="filter === 'all' ? 'secondary' : 'ghost'"
            size="sm"
            @click="setFilter('all')"
          >
            全部 ({{ messages.length }})
          </UiButton>
          <UiButton
            :variant="filter === 'unread' ? 'secondary' : 'ghost'"
            size="sm"
            @click="setFilter('unread')"
          >
            未读 ({{ unreadMessages.length }})
          </UiButton>
        </div>
      </div>

      <div class="flex items-center gap-2">
        <UiButton
          v-if="unreadMessages.length > 0"
          variant="ghost"
          size="sm"
          @click="handleMarkAllAsRead"
          :loading="markingAllAsRead"
        >
          全部已读
        </UiButton>
        <UiButton
          variant="ghost"
          size="sm"
          @click="refresh"
          :loading="loading"
        >
          刷新
        </UiButton>
      </div>
    </div>

    <!-- 错误提示 -->
    <div v-if="error" class="p-4 bg-error/20 text-error rounded-lg m-4 border border-error/30">
      {{ error }}
    </div>

    <!-- 消息列表 -->
    <div class="flex-1 overflow-y-auto">
      <div v-if="loading && filteredMessages.length === 0" class="flex justify-center py-8">
        <div class="text-text-muted">加载消息中...</div>
      </div>

      <div v-else-if="filteredMessages.length > 0" class="divide-y divide-border">
        <MessageItem
          v-for="message in filteredMessages"
          :key="message.id"
          :message="message"
          @mark-as-read="handleMarkAsRead"
          @delete="handleDelete"
          @click="handleMessageClick"
        />
      </div>

      <!-- 空状态 -->
      <div v-else class="flex flex-col items-center justify-center py-12 text-center">
        <div class="w-16 h-16 bg-background-800 rounded-full flex items-center justify-center mb-4">
          <svg class="w-8 h-8 text-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
          </svg>
        </div>
        <h3 class="text-lg font-medium text-text-primary mb-2">
          {{ filter === 'unread' ? '没有未读消息' : '暂无消息' }}
        </h3>
        <p class="text-sm text-text-muted">
          {{ filter === 'unread' ? '所有消息都已阅读' : '当你收到新消息时会在这里显示' }}
        </p>
      </div>

      <!-- 加载更多 -->
      <div v-if="hasMore && filteredMessages.length > 0" class="flex justify-center p-4">
        <UiButton
          variant="secondary"
          size="md"
          :loading="loading"
          :disabled="loading"
          @click="() => loadMore(filter === 'unread')"
        >
          {{ loading ? '加载中...' : '加载更多' }}
        </UiButton>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useMessages } from '../../composables/useMessages'
import type { MessageWithDetails } from '../../types/messages'
import MessageItem from './MessageItem.vue'
import { UiButton } from '../ui'

// 状态
const filter = ref<'all' | 'unread'>('all')
const markingAllAsRead = ref(false)

// 使用消息composable
const {
  messages,
  unreadMessages,
  loading,
  error,
  hasMore,
  loadMessages,
  loadMore,
  markAsRead,
  markAllAsRead: markAllAsReadApi,
  deleteMessage,
  init
} = useMessages()

// 过滤后的消息
const filteredMessages = computed(() => {
  return filter.value === 'unread' ? unreadMessages.value : messages.value
})

// 设置过滤器
const setFilter = (newFilter: 'all' | 'unread') => {
  filter.value = newFilter
  loadMessages(newFilter === 'unread', true)
}

// 刷新消息
const refresh = async () => {
  await loadMessages(filter.value === 'unread', true)
}

// 标记消息为已读
const handleMarkAsRead = async (messageId: number) => {
  const result = await markAsRead(messageId)
  if (!result.success) {
    console.error('Failed to mark message as read:', result.error)
  }
}

// 标记所有消息为已读
const handleMarkAllAsRead = async () => {
  markingAllAsRead.value = true
  try {
    const result = await markAllAsReadApi()
    if (!result.success) {
      console.error('Failed to mark all messages as read:', result.error)
    }
  } finally {
    markingAllAsRead.value = false
  }
}

// 删除消息
const handleDelete = async (messageId: number) => {
  const result = await deleteMessage(messageId)
  if (!result.success) {
    console.error('Failed to delete message:', result.error)
  }
}

// 处理消息点击
const handleMessageClick = (message: MessageWithDetails) => {
  // 可以在这里添加点击消息的逻辑，比如导航到相关页面
  console.log('Message clicked:', message)
}

// 初始化
onMounted(() => {
  init()
})
</script>

<style scoped>
.message-list {
  display: flex;
  flex-direction: column;
  height: 100%;
}
</style>
